TS Utility Types

发表于 | 分类于 |
字数统计: 1.1k 字 | 阅读时长 ≈ 5 分钟

泛型工具

1. Partial

作用：生成一个新类型，该类型与 T 拥有相同的属性，但是所有属性皆为可选项。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 原理：使用keyof拿到所有的属性名，然后在使用in遍历，T[P]拿到相应的值
type Partial<T> = {[P in keyof T]?: T[P]};
interface Foo {
    name: string
    age: number
}
type Bar = Partial<Foo>
 
// 相当于
type Bar = {
    name?: string
    age?: string
}

2. Required

作用：生成一个新类型，该类型与 T 拥有相同的属性，但是所有属性皆为必选项。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 原理：使用-?，将可选项的?去掉。与之对应的还有个+?
type Required<T> = {[P in keyof T]-?: T[P]};
interface Foo {
    name: string
    age?: number
}
type Bar = Required<Foo>
 
// 相当于
type Bar = {
    name: string
    age: string
}

3. Readonly

作用：生成一个新类型，该类型与 T 拥有相同的属性，但是所有属性皆为必选 + 只读。

readonly：只读，赋给对象属性，那么该属性就不可以被重新赋值。函数形参也是同理。

1
2
3
4
5
6
7
8
9
10
11
12
type Readonly<T> = {readonly [P in keyof T]: T[P]};
interface Foo {
    name: string
    age: number
}
type Bar = Readonly<Foo>
 
// 相当于
type Bar = {
    readonly name: string
    readonly age: string
}

4. Record

接收两个泛型参数：对象键、值的类型。

作用 :定义一个对象的 key 和 value 类型。

1
2
3
4
5
6
type Record<K extends keyof any, T> = {[P in K]: T};
Record<key type, value type> 
 
Record<string, never>   // 空对象
Record<string, unknown> // 任意对象
{}                      // 任何不为空的对象

5. Pick

作用：生成一个新类型，继承 Foo 中 age、gender 属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
type Pick<T, K extends keyof T> = { [P in K]: T[P] };
interface Foo {
    name: string
    age?: number
    gender: string
}
type Bar = Pick<Foo, 'age' | 'gender'>
 
// 相当于
type Bar = {
    age?: string
    gender: string
}

6. Omit

作用：生成一个新类型，忽略对象的某些属性功能。

1
2
3
4
5
6
7
8
9
10
11
12
type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
type Foo = {
    name: string
    age: number
}
 
type Bar = Omit<Foo, 'age'>
 
// 相当于
type Bar = {
    name: string
}

7. Exclude

作用：继承T在U中没有的类型。

1
2
3
4
5
6
7
8
type Exclude<T, U> = T extends U ? never : T;
type A = number | string | boolean
type B = number | boolean
 
type Foo = Exclude<A, B>
 
// 相当于
type Foo = string

8. Extract

作用： 和 Exclude 相反，继承T在U中所有的类型。

1
2
3
4
5
6
7
8
type Extract<T, U> = T extends U ? T : never;
type A = number | string | boolean
type B = number | boolean
 
type Foo = Exclude<A, B>
 
// 相当于
type Foo = number | boolean

9. NonNullable

作用：从泛型 T 中排除掉 null 和 undefined。

1
2
3
4
5
type NonNullable<T> = T extends null | undefined ? never : T;
type t = NonNullable<'name' | undefined | null>;
 
// 得到的结果为
type t = 'name'

10. Parameters

作用：得到函数参数类型组成的元祖类型。

1
2
3
type Parameters<T extends (...args: any[]) => any> = T extends (...args: infer P) => any ? P : never;
type A = Parameters<typeof Array.isArray> // [any]
type B = Parameters<typeof parseInt> // [number, (string | undefined)?]

11. ConstructorParameters

作用：获得构造函数参数类型组成的元祖类型。

1
2
3
4
5
6
type ConstructorParameters<T extends new (...args: any[]) => any> = T extends new (...args: infer P) => any ? P : never;
class User{
    constructor(id:string, group:string){}
}
 
type NewUserArg =  ConstructorParameters<typeof User>; // [id: string, group: string]

12. ReturnType

作用：得到函数返回值的类型。

1
2
3
4
5
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
function testFunc(){
      return 123;
}
type A = ReturnType<typeof testFunc>; // number

13. InstanceType

作用：获得构造函数返回值的类型。

1
2
3
4
5
6
7
8
type InstanceType<T extends new (...args: any[]) => any> = T extends new (...args: any[]) => infer R ? R : any;
type h = InstanceType<new (name: string) => {name: string, age: number}>
 
// 得到的结果
type h = {
    name: string;
    age: number;
}

14. ThisParameterType

15. OmitThisParameter

16. ThisType

内在字符串操作类型

Uppercase<StringType>

作用：将字符串文字类型转换为大写。

1
2
type Greeting = "Hello, world"
type ShoutyGreeting = Uppercase<Greeting> // "HELLO, WORLD"

Lowercase<StringType>

作用：将字符串文字类型转换为小写。

1
2
type Greeting = "Hello, world"
type QuietGreeting = Lowercase<Greeting> // "hello, world"

Capitalize<StringType>

作用：将字符串文字类型的第一个字符转换为大写。

1
2
type LowercaseGreeting = "hello, world";
type Greeting = Capitalize<LowercaseGreeting>; // "Hello, world"

Uncapitalize<StringType>

作用：将字符串文字类型的第一个字符转换为小写。

1
2
type UppercaseGreeting = "HELLO WORLD";
type UncomfortableGreeting = Uncapitalize<UppercaseGreeting>; // "hELLO WORLD"

官方文档

https://www.typescriptlang.org/docs/handbook/utility-types.html#thistypetype

参考文档

https://blog.csdn.net/qq_34998786/article/details/119621713